<template>
  <view class="hypage">
    <!-- 头部背景图 -->
    <view class="header-bg">
      <image class="bg-image" :src="bgImage" mode="widthFix"></image>
      <!-- 头像 -->
      <view class="avatar-container">
        <hy-avatar :img="userInfo.avatar"></hy-avatar>
        <text class="change-avatar">点击更换头像</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-content">
      <!-- 昵称 -->
      <view class="form-item">
        <text class="label">昵称</text>
        <input class="value" type="email" v-model="userInfo.nickname" placeholder="请输入昵称" />
      </view>

      <!-- 邮箱 -->
      <view class="form-item">
        <text class="label">邮箱</text>
        <input class="value" type="email" v-model="userInfo.email" placeholder="请输入邮箱" />
      </view>
    </view>

    <!-- 确认提交按钮 -->
        <button class="submit-button" @click="handleSubmit">保存</button>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { userStore } from '@/stores/modules/userStore'
import HyAvatar from "./components/HyAvatar";
import { showSuccess, showError } from '@/utils/feedback'
import { updateUserInfoApi } from '@/api/user'
const user = userStore()
const bgImage = '/static/images/bg.jpg' // 背景图片路径


// 用户信息数据
const userInfo = ref(user.userInfo)

const handleSubmit = async() => {
  try{
    const res = await updateUserInfoApi(userInfo.value)
    if (res.code == 200) {
      showSuccess('保存成功')
      // 刷新用户信息
      user.refreshUserInfo(res.data)
      setTimeout(() => {
        uni.switchTab({ url: '/pages/my/index' })
      }, 1500)
    } else {
      showError(res.message)
    }
  }catch(error){
    console.error("保存用户信息异常:", error);
    showError(error.message || "保存失败");
  }
}

</script>
<style scoped lang="scss">
.hypage {
  gap: 20px;
  .header-bg {
    position: relative;
    background: linear-gradient(to bottom, transparent, #fff 400rpx),
    linear-gradient(to right, #beecd8 20%, #f4e2d8);
    .bg-image {
      width: 100%;
      display: block;
    }
    .avatar-container {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 4px solid #fff;
      }
      .change-avatar {
        position: absolute;
        bottom: -40px;
        right: 0;
        font-size: 14px;
        color: #666;
      }
    }
  }

  .form-content {
    margin-top: 20px;
    padding: 0 15px;
    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      font-size: 16px;
      border-bottom: 1px solid #eee;
      .label {
        color: #333;
      }
      .value {
        color: #999;
      }
    }
  }
}
.submit-button {
      width: 90%;
      background-color: $color-primary;
      color: #fff;
      border: none;
      border-radius: $uni-border-radius-base;;
      font-size: 16px;
      padding: 10px 0;
      margin-top: 20px;
    }
</style>